﻿@{
    ViewBag.Title = "Ratings";
    Layout = "~/views/shared/_layout.cshtml";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input id="pageFlag" type="hidden" value="Ratings" />
    <div class="container">
        <div id="filter" class="style-bg-green" style="width: 100%">
            <table class="filter-table">
                <tr>
                    <td>
                        <label for="operator">Member</label>
                        <select name="operator" id="operator">
                            <option value="0">请选择</option>
                        </select>
                    </td>
                    <td>
                        <label for="project">Project</label>
                        <select name="project" id="project">
                            <option value="0">请选择</option>
                        </select>
                    </td>
                    <td colspan="2">
                        <button id="search" class="query-btn">Query</button>
                    </td>
                </tr>
            </table>
        </div>


        <table class="data-table">
            <thead>
                <tr>
                    <th>User Name</th>
                    <th>Project</th>
                    <th>Rating</th>
                </tr>
            </thead>
            <tbody id="details"></tbody>

            <tfoot>
                <tr>
                    <td></td>
                    <td colspan="10">
                        <div class="pagination">
                            @*<span id="first">首页</span><span id="previous">上一页</span><span>当前第<span id="cpage" style="color: red;"></span>页</span><span id="next">下一页</span><span id="last">末页</span><span>共<span id="totals"></span>页</span>*@
                            <span id="first">First</span><span id="previous">Previous</span><span>Current Page<span id="cpage" style="color: red;"></span></span><span id="next">Next</span><span id="last">Last</span><span>Total<span id="totals"></span></span>
                        </div>
                    </td>
                </tr>

            </tfoot>


        </table>
    </div>

    <script type="text/javascript">
        var psize = 4;
        var cpage = 1;
        var pagecount;
        var MemberStr = "";
        var ProjectStr = "";

        $(function () {
            /*添加header标记*/
            var flag = "<i class='fa fa-angle-down style-green'></i>"
            $("#Ratings").append(flag);

            page.$Init();

        });

        var page = {
            $Init: function () {
                //加载下拉框选项
                page.$loadOption();
 
                //加载当前类型的名录
                page.$loadEnterprises();

                /*查询*/
                page.$search();

                /*分页*/
                page.$pagination();
            },

            //加载下拉框选项
            $loadOption: function () {
                $.ajax({
                    url: "/api/Ratings/GetTicketsInfoByOperator",
                    dataType: "json",
                    success: function (data) {
                        //var Project = [];
                        var ProjectHtmlStr = "";
                        $.each(data.MemberInfo, function (i, MemberItem) {
                            MemberStr += "<option value = " + MemberItem.Member + ">" + MemberItem.MemberName + "</option>";

                        });
                        $.each(data.ProjectInfo, function (j, ProjectItem) {
                            ProjectStr += "<option value = " + ProjectItem.Project + ">" + ProjectItem.ProjectName + "</option>";
                        });
                        $("#project").append(ProjectStr);
                        $("#operator").append(MemberStr);

                    }
                });
            },

            //加载当前类型的名录
            $loadEnterprises: function () {
                $("#details").html("");     //清空表格内容，便于刷新页面重新显示内容
                var num,starRating,showData = "";
                $.ajax(
                    {
                        url: "/api/Ratings/GetTicketsAndRatings",
                        type: "post",
                        data: { 'project': $("#project").val(), 'operatorId': $("#operator").val(), 'pageSize': psize, 'pageIndex': cpage },
                        success: function (info) {
                            pagecount = info.MaxPage;
                            $("#totals").text(pagecount);
                            $("#cpage").text(cpage);
                            $.each(info.Model, function (j, item2) {
                                //显示评分具体数值
                                //showData += "<tr><td>" + item2.MemberName + "</td><td>" + item2.ProjectName + "</td><td>" + item2.Rating + "</td></tr>";

                                //显示星级评分
                                num = item2.Rating;
                                starRating = "<i class='fa fa-star s" + j + "'></i><i class='fa fa-star s" + j + "'></i><i class='fa fa-star s" + j + "'></i><i class='fa fa-star s" + j + "'></i><i class='fa fa-star s" + j + "'></i>";
                                showData = "<tr><td>" + item2.MemberName + "</td><td>" + item2.ProjectName + "</td><td>" + starRating + "</td></tr>";
                                $("#details").append(showData);
                                $(".s" + j).slice(0, num).addClass("style-green");
                                $(".s" + j).slice(num, 6).addClass("style-gray");
                            });

                            var str4 = "";
                            for (var j = 1; j <= pagecount; j++) {
                                str4 += "<td><a onclick='page.$loadData(this)' style=' cursor:pointer' title='第" + j + "页'>  " + j + "  </a></td>"
                            }
                            $("#page").html(str4);

                        }
                    });
            },

            /*分页*/
            $pagination: function () {
                $("#previous").click(function () {
                    if (cpage != pagecount) {
                        $("#next").attr("enabled", true);
                    }
                    if (cpage == 1) {

                        $("#previous").attr("enabled", false);
                        return false;
                    }
                    cpage = cpage - 1;
                    page.$loadEnterprises();
                });

                $("#next").click(function () {
                    if (cpage != 1) {
                        $("#previous").attr("enabled", true);
                    }
                    if (cpage == pagecount) {
                        $("#next").attr("enabled", false);
                        return false;
                    }
                    cpage = cpage + 1;
                    page.$loadEnterprises();
                });
                //首页
                $("#first").click(function () {
                    cpage = 1;
                    page.$loadEnterprises();
                });

                $("#last").click(function () {
                    cpage = pagecount;
                    page.$loadEnterprises();
                })
            },

            /*查询*/
            $search: function () {
                $("#search").click(function () {
                    page.$loadEnterprises();
                });
            },

            /*加载每页的信息*/
            $loadData: function (e) {
                cpage = $(e).text();
                page.$loadEnterprises();
            }
        };


    </script>
</body>
</html>

